<template>
  <el-row style="height: 100%;background-color: #f3f4f9">
    <el-row style="height: 10%;border-bottom-style: solid;border-bottom-color: #e6e6e6;background-color: #ffffff">
      <Header></Header>
    </el-row>
    <el-row :gutter="20" style="height: 90%">
      <el-col :span="4" style="height: 100%;">
        <Navigator></Navigator>
      </el-col>
      <el-col :span="20" style="border-top: 1px solid #2c3e50;padding: 0;height: 100%">
        <el-row style="height: 13%">
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="6">
              <el-card shadow="always">
                <span style="font-size: 20px">
                  总订单: {{order_sum}}
                </span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="always">
                <span style="font-size: 20px">
                  生产订单: {{produce_sum}}
                </span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="always">
                <span style="font-size: 20px">
                  收购订单: {{buy_sum}}
                </span>

              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="always">
                <span style="font-size: 20px">
                  运输订单: {{ship_sum}}
                </span>
              </el-card>
            </el-col>
          </el-row>
        </el-row>
        <el-row style="height: 37%">
          <LineCharts></LineCharts>
        </el-row>
        <el-row :gutter="30" style="height: 50%">
          <el-col :span="12" style="height: 100%">
            <ColumnCharts></ColumnCharts>
          </el-col>
          <el-col :span="12" style="height: 100%">
            <PieChart></PieChart>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-row>

</template>

<script>

import Header from "@/components/Header";
import Navigator from "@/components/Navigator";
import LineCharts from "@/echarts/LineCharts"
import ColumnCharts from "@/echarts/ColumnCharts"
import PieChart from "@/echarts/PieChart"

export default {
  // name: "main",
  components: {ColumnCharts, Header, Navigator, LineCharts, PieChart},
  data(){
    return{
      index:1,
      post_role:'',
      username:'',
      order_sum:0,
      produce_sum:0,
      ship_sum:0,
      buy_sum:0,

      real_role : [
        {
          value: 1,
          label:'生产者'
        },
        {
          value: 2,
          label:'收购者'
        },
        {
          value: 3,
          label:'运输者'
        },
        {
          value: 4,
          label:'销售者'
        },
        {
          value: 5,
          label:'消费者'
        },
        {
          value: 0,
          label:'游客'
        },
        {
          value: 6,
          label:'root'
        },
      ]
    }
  },
  mounted() {
    this.set_user_info()
    this.get_order_num()
  },
  methods:{

    set_user_info(){
      this.username = this.$cookies.get('username')
      this.post_role = this.$cookies.get('role')
    },
    get_order_num() {
      this.axios.get('/order_sum', {
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res) => {
        if (res.data.code == 200) {
          let get_data = res.data.data
          this.order_sum = get_data['order']
          this.produce_sum = get_data['produce']
          this.buy_sum = get_data['buy']
          this.ship_sum = get_data['transport']
        }
      })
    }

  }
}
</script>

<style scoped>
.container{
  height: 100%;
  width: 100%;
  position: fixed;
}
.aside{
  background-color: #545c64;
}
.main{
  background-color: #fff;
}
.form{
  width: 400px;
  margin: 0 auto;
}
</style>